<html>
<head>
    <meta charset="utf-8"/>
    <link type="text/css" href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="backgroup-autum">
    <h1 id="logo"></h1>
    <div id="wapper">
        <div id="search">
            <form method="post">
                <input type="text" style="width: 300px"/>
                <input type="submit" value="search" style="width: 100px;"/>
            </form>
        </div>
        <div id="main2"></div>
        <div id="main">
            <div id="header">
                <ul>
                    <li><a href="#">menu1</a></li>
					<li><a href="#">menu2</a></li>
					<li><a href="#">menu3</a></li>
					<li><a href="#">menu4</a></li>
					<li><a href="#">menu5</a></li>
					<li><a href="#">menu6</a></li>
                </ul>
            </div>
            <div id="main_left">
                <div class="menu-left">

                    <p style="background-color:#999999;">noi dung 1</p>
                    <p style="border-bottom:#999999;border-bottom-style:solid;border-bottom-width:thin;color: coral; ">
                        noi dung 2</p>

                        <p style="color: coral;">nam 2013</p>
                        <ul>
                            <li><span>noi dung</span></li>
                            <li><span>noi dung</span></li>
                            <li><span>noi dung</span></li>
                        </ul>
                    <p style="color: coral; border-top:#999999 solid thin ">nam 2012</p>
                    <ul>
                        <li><span>noi dung</span></li>
                        <li><span>noi dung</span></li>
                        <li><span>noi dung</span></li>
                    </ul>
                </div>
                    <div class="contact">
                        <p align="center" style="background:coral;border-bottom:#999999;border-bottom-style:solid;border-bottom-width:thin ;height: 36px; ">
                        phone   </p>
                        <div class="img-contact">
                            <img src="images/phone.jpg"  >
                            <strong style="top: 0;left: 100px">Phone</strong><br/>
                                <span style="top: 20px;">+7(945) 988 7693</span> <br/>
                                <span style="top: 40px;">+7(499) 161 4177</span> <br/>
                            <strong style="top: 60px;">Email</strong> <br/>
                                <span style="top: 80px;">tingo-shoes@mail.ru</span> <br/>
                                <span style="top: 100px;">livial99@mail.ru</span> <br/>
                        </div>

                    </div>
                    <div class="logo-left">
                        <img src="images/chim.png">
                    </div>
            </div>
            <div id="main_right">
                <div class="hinh">
                      <img src="images/girl.jpg">
                </div>
                <!--slide-->
                <div class="slide">
                    <div class="scrollprev">
                    </div>
                    <div class="scrollwrapper">
                        <div class="scrollbox">
                            <div class="scrollbox-content">
                                <strong>Model:</strong> <span>PK 14-600</span><br />
                                <strong>Sizes:</strong> <span>24-30</span><br />
                                <span>24 nap a nopode</span>
                            </div>
                            <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
                        </div>
                        <div class="scrollbox">
                            <div class="scrollbox-content">
                                <strong>Model:</strong> <span>PK 14-600</span><br/>
                                <strong>Sizes:</strong> <span>24-30</span><br />
                                <span>24 nap a nopode</span>
                            </div>
                            <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
                        </div>
                        <div class="scrollbox">
                            <div class="scrollbox-content">
                                <strong>Model:</strong> <span>PK 14-600</span><br />
                                <strong>Sizes:</strong> <span>24-30</span><br />
                                <span>24 nap a nopode</span>
                            </div>
                            <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
                        </div>
                        <div class="scrollbox lastbox">
                            <div class="scrollbox-content">
                                <strong>Model:</strong> <span>PK 14-600</span><br />
                                <strong>Sizes:</strong> <span>24-30</span><br />
                                <span>24 nap a nopode</span>
                            </div>
                            <img class="scrollbox-image" src="images/anh-san-pham-scrollbar.png" />
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="scrollnext">
                    </div>
                    <div class="clear"></div>
                </div>
                <!--noi dung slide-->
                <div class="noidung-slide">
                    noi dung 1 bai duoi slide <br>
                    noi dung 1 bai duoi slide <br>
                    noi dung 1 bai duoi slide <br>
                    noi dung 1 bai duoi slide <br>
                    noi dung 1 bai duoi slide <br>

                </div>

            </div>

            <div id="sp_tag">
                <!--tab-->
                <div class="nav-article">
                    <ul  class="nav-account">
                        <li class="selected_tab">
                            <a href="javascript:void(0)" title="content_1" ><span style="">menu 1 menu 1</span></a>
                        </li>
                        <li class="unselect_tab">
                            <a href="javascript:void(0)" title="content_2"><span style="">menu 2 menu 1 menu 1</span></a>
                        </li>
                        <li class="unselect_tab">
                            <a href="javascript:void(0)" title="content_3"><span style="">menu 3 menu 1menu 1</span></a>
                        </li>
                        <li class="unselect_tab">
                            <a href="javascript:void(0)" title="content_4"><span style="">me nu4 menu 1menu 1menu 1</span></a>
                        </li>
                    </ul>

                    <div class="clear"></div>
                    <div id="content_1" style="display: block;" class="account content_1">
                        noi dung 1
                    </div>
                    <div id="content_2"  style="display: none;" class="account content_2">
                        noi dung 2
                    </div>
                    <div id="content_3" style="display: none;" class="account content_3">
                        noi dung 3
                    </div>
                    <div id="content_4" style="display: none;" class="account content_4">
                        noi dung 4
                    </div>
                </div>
            </div>
            <div id="sp1">
                <h2 id="title1">san pham 1</h2>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp1.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp1.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp2.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp3.jpg" alt="">
                </div>
            </div>
            <div id="sp2">
                <h2 id="title2">san pham 2</h2>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp1.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp1.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp2.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp3.jpg" alt="">
                </div>
            </div>
            <div id="sp3">
                <h2 id="title3">san pham 3</h2>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp1.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp1.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp2.jpg" alt="">
                </div>
                <div class="sanpham">
                    <span class="g1">ma san pham : <strong> PK 14-609</strong></span>
                    <span class="g2">size : <strong>2  4-30</strong></span>
                    <span class="ten">so luong</span>
                    <img src="images/sp3.jpg" alt="">
                </div>
            </div>
            <div id="footer">
                footer
            </div>
        </div>

    </div>
    <script>
        $(".nav-account a").click(function () {
            $(".selected_tab").removeClass("selected_tab").addClass('unselect_tab');
            $(this).parent().addClass("selected_tab").removeClass('unselect_tab');
            $(".account").slideUp();
            var content_show = $(this).attr("title");
            $("."+content_show).slideDown();
        });

    </script>
</div>
</body>
</html>